<script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { MinusCircleFilled, PlusOutlined } from '@ant-design/icons-vue'
  import PageHeader from "@/components/PageHeader.vue";
  import Upload from "@/components/Upload.vue";
  import { evaOrderApi } from "@/api";
  import {message} from "ant-design-vue";
  const router = useRouter()
  const route = useRoute()
  const orderId = ref()
  const star = ref(5)
  const imgId = ref([])
  const imgUrl = ref([])
  const detail = ref('')
  // 上传图片
  const upload = (e) => {
    imgId.value.push(e.id)
    imgUrl.value.push(e.path)
  }
  // 删除图片
  const delImg = (index) => {
    imgId.value.splice(index, 1)
    imgUrl.value.splice(index, 1)
  }
  const submit = () => {
    if (!detail.value) return message.warn('请输入评价信息')
    const params = {
      order_id: orderId.value,
      star: star.value,
      detail: detail.value,
      img: imgId.value.join(),
    }
    evaOrderApi(params).then(() => {
      message.success('评价成功')
      router.back()
    }).catch((err) => message.error(err.msg))
  }
  onMounted(() => {
    const { id } = route.query
    orderId.value = id
  })
</script>

<template>
  <div class="eva-order">
    <PageHeader>
      <a-button class="p-btn" type="primary" size="small" @click="submit"> 提交 </a-button>
    </PageHeader>
    <div class="eva-main">
      <div class="box">
        <div class="title"> 评分 </div>
        <a-rate v-model:value="star" allow-half />
      </div>
      <div class="box">
        <div class="title"> 评价信息 </div>
        <textarea v-model="detail" class="textarea" placeholder="请输入评价信息"/>
      </div>
      <div class="box">
        <div class="title"> 评价图片 </div>
        <div class="img-box">
          <div class="img" v-for="(item, index) in imgUrl" :key="item">
            <img :src="item" class="img" alt="">
            <MinusCircleFilled class="close" @click="delImg(index)" />
          </div>
          <Upload @upload="upload"> <PlusOutlined/> </Upload>
        </div>
      </div>
      <a-button class="m-btn" type="primary" @click="submit"> 提交 </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .eva-order {
    padding: 40px 10px;
    .eva-main {
      gap: 10px;
      display: flex;
      flex-direction: column;
      .box {
        padding: 10px;
        border-radius: 10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
        .title {
          font-size: 16px;
          margin-bottom: 10px;
        }
        .textarea {
          width: 100%;
          max-width: 100%;
          min-height: 100px;
          border: none;
          outline: none;
          padding: 10px;
          border-radius: 10px;
          background-color: #f8f8f8;
        }
        .img-box {
          gap: 15px;
          display: flex;
          flex-wrap: wrap;
          .img {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            position: relative;
            object-fit: cover;
            .close {
              color: #f40;
              font-size: 20px;
              cursor: pointer;
              position: absolute;
              top: 0;
              right: 0;
              transform: translate(50%, -50%);
            }
          }
        }
      }
    }
    .p-btn, .m-btn {
      background-color: var(--primary);
    }
    @media (max-width: 750px) {
      .p-btn {
        display: none;
      }
    }
    @media (min-width: 750px) {
      .m-btn {
        display: none;
      }
    }
  }
</style>